<template>
	<view class="page">
		<view class="all">
        <view class="form" v-if="userInfo.state===0 &&applyInfo.state===3">
		<view class="tubiao">
			<image class="logo" src="/static/images/shijian.png"></image>
		</view>
		<view class="content">
			<view class="wenzi">
				申请接单常见问题说明
			</view>
			<view class="form-container">
				<view class="wenzi-container">
				<label for="name">姓名：</label>
				<input type="text" id="name" name="name" placeholder="请输入姓名" v-model="name" maxlength="11">
				</view>
				<view class="wenzi-container">
				<label for="student-id">学号：</label>
				<input type="text" id="student-id" name="student-id" placeholder="请输入学号" v-model="studentNum" maxlength="13">
				</view>
				<view class="image-container">
					<!-- <span class="zhengming>相关证件证明</span> -->
					<label for="zhengming">相关证件证明：</label>
					<img :src="student_crad_pic" mode="" v-if="student_crad_pic"/>
					<view class="tupian" v-else @click="updateAvatar">
						<span>+</span>
					</view>
				</view>
				<view class="wenzi1">
					点击复制管理员微信进行加急审核
				</view>
				<view class="buttom"></view>
				<view class="xieyi">
					<image class="logo" src="/static/images/xieyi.png"></image>
					<view class="bot">电子协议</view>
					<view class="bot1">></view>
				</view>
				<view class="register-btn" @click="confirmApply">
					提交申请
				</view>
			</view>
		
		</view>
		</view>
		</view>
		<view v-if="userInfo.state === 1 && applyInfo.state == 1" class="icon">
			<view style="text-align: center; font-size: 24px; font-weight: 600;">
			  申请信息
			</view>
			<view>
			  姓名：{{ applyInfo.name }}
			  <text style="background-color: #2fadd3;">申请通过</text>
			</view>
			<view>
			  学号：{{ applyInfo.studentNum }}
			</view>
			<view>
			  学生证：
			  <image :src="applyInfo.student_crad_pic" alt="" mode="widthFix"/>
			</view>
		</view>
		<view v-if="userInfo.state === 0 && applyInfo.state == 2" class="icon">
			<view style="text-align: center; font-size: 24px; font-weight: 600;">
			  申请信息
			</view>
			<view>
			  姓名：{{ applyInfo.name }}
			  <text style="background-color: #2fadd3;">申请未通过</text>
			</view>
			<view>
			  学号：{{ applyInfo.studentNum }}
			</view>
			<view>
			  学生证：
			  <image :src="applyInfo.student_crad_pic" alt="" mode="widthFix"/>
			</view>
		</view>
		<view v-if="userInfo.state === 0 && applyInfo.state == 0" class="icon">
			<view style="text-align: center; font-size: 24px; font-weight: 600;">
			  申请信息
			</view>
			<view>
			  姓名：{{ applyInfo.name }}
			  <text style="background-color: #2fadd3;">申请中</text>
			</view>
			<view>
			  学号：{{ applyInfo.studentNum }}
			</view>
			<view>
			  学生证：
			  <image :src="applyInfo.student_crad_pic" alt="" mode="widthFix"/>
			</view>
		</view>
	</view>
</template>

<script>
	import { applyState,apply } from '../../api/index.js';
	export default {
		data() {
			return {
				userInfo:null,
				applyInfo:{
					state:''
				},
				student_crad_pic:'',
				name:'',
				studentNum:''
			};
		},
		created(){
			this.userInfo=uni.getStorageSync('userInfo');
			//调用getApply函数 传递用户Id 产看申请状态
			this.getApply()
		},
		methods:{
			//查看申请状态
			getApply(){
				//调用applyState函数传递Id获取用户申请的状态，
				applyState(this.userInfo.id).then(res=>{
					console.log(res);
					//返回值res.data.apply 为数组
					//把返回的数据存储到data中
					if(res.data.status===0){
						//res.data.apply中返回了申请时填写的名字、学号和学生证
						this.applyInfo=res.data.apply[0];
						this.userInfo={
							...this.userInfo,
							real_name:res.data.apply[0].name,
							studentNum:res.data.apply[0].studentNum,
							student_crad_pic:res.data.apply[0].student_crad_pic
						}
						console.log(this.userInfo,8888)
						//存储姓名、学号、学生证到userInfo
						//同时存储到本地缓存storage中
						uni.setStorageSync('userInfo',this.userInfo);
						console.log(uni.getStorageSync("userInfo"),9999);
						
					}else{
						uni.showToast({
							title:"未申请"
						})
						this.applyInfo.state=3
					}
				})
			},
			//上传图片
			updateAvatar(){
				//选择图片
				uni.chooseMessageFile({
					count:1,
					type:"image",
					success:(res=>{
						console.log(res,"图片");
						//获取图片临时地址
						let imageUrl=res.tempFiles[0].path
						console.log(imageUrl);
						//上传图片临时地址到服务器
						uni.uploadFile({
							url:"http://8.140.198.52:8001/common/uploadFile",
							filePath:imageUrl,
							name:"file",
							header:{
								"Authorization":uni.getStorageSync("token"),
								'content-type':'mltipart/form-data',
							},
							success:(res)=>{
								console.log(res,"图片在服务器上的地址");
								this.student_crad_pic=res.data
							}
						})
						
					})
				})
			},
			confirmApply(){
				let obj={
					name:this.name,
					studentNum:this.studentNum,
					student_crad_pic:this.student_crad_pic,
					users_id:uni.getStorageSync("userInfo").id
				}
				apply(obj).then(res=>{
					if(res.data.status===0){
						//保存成功后提示成功
						uni.showToast({
							title:"成功"
						})
						let info=uni.getStorageSync("userInfo")
						//保存更新数据到本地
						let userInfo={...info,
							name:this.name,
							studentNum:this.studentNum,
							student_crad_pic:this.student_crad_pic
						}
						uni.setStorageSync("userInfo",userInfo)
					}
					uni.navigateBack(1);
					console.log(res,222);
				})
			}
		
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		width:100%;
		background-color: #f5f5f5;
		// height:100vh;
		// background-color: red;
		display: flex;
		position:relative;
	}
	.all{
		display: flex;
		position:relative;
		background-color: white;
		border-radius: 10px;
		width: 90%;
		height: 460px;
		
		 // overflow: hidden;
		margin: 30px auto 10px;
	}
	.tubiao{
		position: relative;
		top:-25px;
		left: 40%; /* 根据需要调整 */
		font-size: 2em;
		background-color: white;
		border-radius: 30px;
		
	}
	.logo{
		width:50px;
		height:50px;
		
	}
	.content{
		display: flex;
		position: absolute;
		width:100%;
		
		.wenzi{
			width:70%;
			height:25px;
			display: flex;
			position: absolute;
			// text-align: center;
			font-size: 14px;
			margin-top:50px;
			margin-bottom: 10px;
			margin-left: 15px;
			border: 2px solid #FF1493  ;
			background-color: #FF88C2 ;
			border-radius: 5px;
			padding-top: 5px;
			padding-left:50px; 
		}
		.form-container{
			// display: flex;
			position: absolute;
			width:100%;
			height:200px;
			margin: 100px auto 10px;
			// padding-left:5px;
			.wenzi-container{
				// background-color: red;
				display: flex;
				// position: absolute;
				width: 90%;
				padding: 5px;
				margin: 0 auto;
				border-bottom: 2px solid #C0C0C0 ; 
			}
			.wenzi-container input{
				text-align: right;
			}
			.image-container{
				// display: flex;
				// position: absolute;
				// background-color: red;
				// display: flex;
				width: 90%;
				padding: 5px;
				margin: 0 auto;
				// border-bottom: 2px solid #C0C0C0 ; 
				.zhengming{
					// position: absolute;
				}
				.tupian{
					// position: absolute;
					width:100%;
					height:80px;
					background-color:#DCDCDC ; 
					border-radius: 10px;
					// background-color: red;
					
				}
			}
			.wenzi1{
				width:80%;
				height:25px;
				font-size: 14px;
				margin-top:20px;
				margin-bottom: 20px;
				margin-left: 15px;
				border: 2px solid #FF1493    ;
				background-color: #FF88C2 ;
				border-radius: 5px;
				padding-top: 5px;
				padding-left:20px; 
				// background-color: red;
			}
			.buttom{
				position: absolute;
				width:95%;
				height:30px
			}
			.xieyi{
				width:95%;
				height:30px;
				// background-color: red;
				margin:0 auto; 
				display: flex;
				border-bottom: 2px solid #C0C0C0 ; 
			}
			
			.logo{
				width:15px;
				height:15px;
				margin-top: 8px;
				margin-left: 15px;
			}
			.bot{
				margin-top: 5px;
				// display: flex;
				position: absolute;
				margin-left:35px;
				font-size:14px;
			}
			.bot1{
				position: absolute;
				// margin-left:5px;
				margin-top: 5px;
				margin-left: 255px;
			}
			.register-btn{
				width:95%;
				height:80rpx;
				margin:10% auto 0;
				line-height: 80rpx;
				text-align: center;
				background-color: #FF88C2;
				border-radius: 30rpx;
			}
		}
		
		
	}
	
	
</style>
